<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     *{
        margin: 0;
        padding: 0;
      }
     #box1{
        width: 100px ;
        height: 100px ;
        background-color: red;
        border-radius: 50%;
        position: absolute ;
        left: 0;
        text-align: center;
        line-height: 100px;
      } 
    #btn01{
        width: 50pxpx;
        height: 30px;
        color: white;
        background-color: red;
        border: 1px solid red;
    }
    </style>
    </head> 
   <body>
        <div id="box1"><button id= "btn01">点击移动</button></div>
    <script type="text/javascript">
             window.onload = function(){
             var box1=document.getElementById("box1");
             var btn01=document.getElementById("btn01");
             var timer;
             btn01. onclick = function(){
             clearInterval( timer) ;
             timer = setInterval(function(){
             var oldValue = parseInt(getStyle(box1,"left"));
             var newValue = oldValue + 1;
             if(newValue > 800){
                 newValue = 800;
               }
              box1.style.left = newValue + "px";
             if(newValue == 800){
             clearInterval (timer);}
               },30);
          };
       };
       function getStyle(obj,key){
            if(window.getComputedStyle){
                return window.getComputedStyle(obj,null)[key];
            }else{
                return obj.currentStyle[key];
            }
        }
    </script>
   </body>
</html>